<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <meta name="description" content="Use Here Venues API ot load and visualize data on the map">
    <title>Display Venues on map</title>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-venues.js"></script>
    <link rel="stylesheet" type="text/css" href="../template.css" />
    <link rel="stylesheet" type="text/css" href="demo.css" />
    <script type="text/javascript" src='../test-credentials.js'></script>
    <style type="text/css">
      .log {
        position: absolute;
        top: 5px;
        left: 5px;
        height: 150px;
        width: 250px;
        overflow: scroll;
        background: white;
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 12px;
      }
      .log-entry {
        padding: 5px;
        border-bottom: 1px solid #d0d9e9;
      }
      .log-entry:nth-child(odd) {
          background-color: #e1e7f1;
      }
    </style>
  </head>
  <body>
    <h1>Display Venues</h1>
    <p>Using the Venues module facilitates access to given indoor maps including full JSON models. The Venues APIs
      provide information about the indoor spaces, including buildings, level geometry and points of interest.
    </p>
    <p>More information about the use of Venues API can be found <a href="https://developer.here.com/documentation/maps/dev_guide/topics/venues.html" target="_blank">here</a>.</p>
    <p>This example shows a map of <b>Zurich Airport</b>.
    <div id="map"></div>
    <h3>Code</h3>
    <p>
      The example shows loading of indoor information using <code>H.venues.Service</code> and renders the indoor map
      using an instance of <code>H.venues.Provider</code>.<br> It also shows usage of venue related ui controls to
      change levels and buildings using respectively <code>H.venues.ui.LevelControl</code> and
      <code>H.venues.ui.DrawingControl</code>.
    </p>
    <script type="text/javascript" src='demo.js'></script>
  </body>
</html>
